<script setup>
import {inject} from "vue"
import TableColumn1 from "./TableColumn1.vue";

const props = defineProps({
    elem: {
        type: Object,
        default: () => {
            return {
                styleConfig: {},
                dataConfig: {},
                children: []
            }
        }
    }
})

</script>

<template>
    <div :style="elem.styleConfig" class="Table1">
        <table class="table">
            <tbody>
            <tr v-for="(row, i) in elem.children" :key="i">
                <TableColumn1 v-for="(column, j) in row.children" :key="j" :elem="column" :table="elem" />
            </tr>
            </tbody>
        </table>
    </div>
</template>

<style lang="scss">
.Table1 {
    position: relative;

    table {
        width: 100%;
        border-collapse: collapse;

        th, td {
            border: 1px solid transparent;
        }
    }
}
</style>